<script setup>
import { ref, onMounted } from 'vue'
import { getArticleListAPI } from '../../apis/apis'
import Aside from '../components/Aside.vue';

// 归档文章列表
const list = ref([])
// 当前页
const current = ref(1)
// 记录条数
const total = ref(0)
// 骨架屏
const loading = ref(true)
// 当前页改变
const pageChange = async (num) => {
  const params = {
    current: num,
    pageSize: 10
  }
  const res = await getArticleListAPI(params)
  total.value = res.data.total
  list.value = res.data.pageList
}
const getArticleList = async () => {
  const params = {
    current: current.value,
    pageSize: 10
  }
  const res = await getArticleListAPI(params)
  total.value = res.data.total
  list.value = res.data.pageList
}

onMounted(() => {
  getArticleList()
  // 骨架屏
  setTimeout(() => {
    loading.value = false
  }, 550);
})

</script>

<template>
  <div>
    <div class="px-5 py-5 bg-white shadow-md">
      <div class="flex items-center py-5 pb-10 text-2xl font-medium text-gray-500">
        <div class="ml-10">
          <el-skeleton
            animated
            :loading="loading"
          >
            <template #template>
              <div class="w-32">
                <el-skeleton-item
                  variant="h1"
                  style="height: 3rem;"
                />
              </div>
            </template>
            <template #default>
              已归档{{ total }}篇
            </template>
          </el-skeleton>

        </div>
      </div>
      <el-timeline>
        <el-skeleton
          animated
          :loading="loading"
        >
          <template #template>
            <el-timeline-item
              placement="top"
              color="#e7e9ec"
              v-for="item in 10"
            >
              <el-skeleton-item
                variant="h1"
                style="height: 4rem;"
              />
            </el-timeline-item>

          </template>
          <template #default>
            <el-timeline-item
              type="success"
              :timestamp="item.createTime"
              placement="top"
              color="#808080"
              v-for="item in list"
              :key="item.articleId"
            >
              <RouterLink :to="{ path: '/detail/' + item.articleId }">
                <el-card>
                  <div
                    class="flex items-center justify-between py-1 duration-150 border-b border-gray-300 border-dashed cursor-pointer hover:border-b hover:border-gray-600"
                  >
                    <div class="px-1">{{ item.title }}
                    </div>
                    <div class="px-3">{{ item.count }}字
                    </div>
                  </div>

                </el-card>
              </RouterLink>
            </el-timeline-item>
          </template>
        </el-skeleton>

      </el-timeline>
    </div>

    <div class="flex items-center justify-center py-2 mt-4 bg-white">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="total"
        :current="current"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
    <div>

      <Footer></Footer>
    </div>
  </div>
</template>

<style
  scoped
  lang='scss'
></style>